<template>
  <div class="maincontent csaro">
    <el-tabs class="resultIdea" v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-form
          class="earlyMappingForm"
          :inline="true"
          ref="surveyBaseForm"
          label-position="left"
          :model="surveyBaseData"
          label-width="80px"
        >
          <div class="maintitle">前期测绘基本信息</div>
          <div class="basicInfo">
            <el-form-item label="测绘单位" label-width="210px" prop="companyId">
              <el-input
                v-if="surveyBaseData.enterpriseBaseDTO"
                v-model="surveyBaseData.enterpriseBaseDTO.name"
                readonly
              ></el-input>
            </el-form-item>
            <div>
              <el-form-item label="红线范围内总面积" label-width="210px" prop="totalAreaInRedline">
                <el-input value="1125" v-model="surveyBaseData.totalAreaInRedline" readonly>
                  <i slot="suffix">公顷</i>
                </el-input>
              </el-form-item>
              <el-form-item label="可实施总规模" label-width="120px" prop="totalAreaForced">
                <el-input value="112.5" v-model="surveyBaseData.totalAreaForced" readonly>
                  <i slot="suffix">公顷</i>
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="可开发规模" label-width="210px" prop="totalAreaDevelop">
                <el-input value="1125" v-model="surveyBaseData.totalAreaDevelop" readonly>
                  <i slot="suffix">公顷</i>
                </el-input>
              </el-form-item>
              <el-form-item label="可整理规模" label-width="120px" prop="totalAreaOrganized">
                <el-input value="112.5" v-model="surveyBaseData.totalAreaOrganized" readonly>
                  <i slot="suffix">公顷</i>
                </el-input>
              </el-form-item>
              <el-form-item label="可复垦规模" label-width="120px" prop="totalAreaReclaim">
                <el-input value="112.5" v-model="surveyBaseData.totalAreaReclaim" readonly>
                  <i slot="suffix">公顷</i>
                </el-input>
              </el-form-item>
            </div>
            <el-form-item label="1:10000土地利用现状图图幅号" label-width="210px" prop="drawingNumber">
              <el-input value="SH12346Q" v-model="surveyBaseData.drawingNumber" readonly></el-input>
            </el-form-item>
            <div>
              <span class="block"></span>
            </div>
          </div>
        </el-form>
        <el-form
          class="earlyMappingForm"
          :inline="true"
          ref="formData"
          label-position="left"
          :model="form"
          :rules="formRule"
          label-width="80px"
        >
          <div class="maintitle">内业审查</div>
          <div class="formAllRow">
            <el-form-item label="图件审查">
              <el-input
                style="width:774px;"
                v-model="form.drawingAudit"
                :rows="3"
                type="textarea"
                readonly
              ></el-input>
            </el-form-item>
            <div>
              <el-form-item label="数据及报告审查" label-width="130px">
                <el-input
                  style="width:774px;"
                  :rows="3"
                  type="textarea"
                  v-model="form.dataReportAudit"
                  readonly
                ></el-input>
              </el-form-item>
            </div>
          </div>

          <div class="maintitle">外业审查</div>
          <div class="formAllRow">
            <div>
              <el-form-item label="其他草地审查" label-width="100px">
                <el-input
                  style="width:774px;"
                  :rows="3"
                  type="textarea"
                  v-model="form.otherGrassAudit"
                  readonly
                ></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="疑问审查">
                <el-input
                  style="width:774px;"
                  :rows="3"
                  type="textarea"
                  v-model="form.questionAudit"
                  readonly
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <el-form
          :inline="true"
          class="earlyMappingForm"
          :model="examineOpinion"
          :rules="opinionFormRule"
          ref="opinionForm"
        >
          <div class="maintitle">区县初审意见</div>
          <div class="formAllRow">
            <div>
              <el-form-item label="区县中心初审意见" label-width="150px" prop="opinion">
                <el-input
                  style="width:774px;"
                  :rows="3"
                  type="textarea"
                  v-model="examineOpinion.opinion"
                  placeholder="请输入"
                  :readonly="isCurrentProcess"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="formcontent">
            <div>
              <el-form-item label="审查人" label-width="60px">
                <el-image style="width: 120px; height: 60px" :src="signPhotoObj.img"></el-image>
              </el-form-item>
              <el-form-item label="审查日期" label-width="110px" prop="createTime">
                <el-date-picker
                  v-model="examineOpinion.createTime"
                  type="datetime"
                  placeholder="请选择"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :readonly="isCurrentProcess"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见" label-width="110px" prop="status">
                <el-select v-model="examineOpinion.status" :disabled="isCurrentProcess">
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="不同意" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div style="margin-top:110px;">
            <el-form-item>
              <el-button type="primary" @click="onSubmit" v-if="!isCurrentProcess">提交</el-button>
              <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">返回</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="审查流程" name="second">
        <div class="processContainer">
          <process :processData="processData1"></process>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import process from "../../public/process";
import {
  getRegPlanningDesignDetail,
  addReviewOpinion,
  examineOpinionList,
  getNotifyDetail
} from "@/api/plannDesign/application";
import { getInfo } from "@/api/user";
import {
  getSurveyData,
  getDataAdvice,
  saveDataAdvice
} from "@/api/earlyMapping/mapResultReviewOpinion";
import config from "@/config/";
import moment from "moment";
export default {
  components: {
    process: process
  },
  data() {
    return {
      historyData: {
        // planningDesignFile: {
        //     fileName: ''
        // }
      },
      companyList: [], // 企业列表
      fileList: [],
      planningDesignFile: {},
      projectId: localStorage.getItem("projectId") * 1,
      activeName: "first",
      examineOpinion: {
        groupId: 5, // 审查分组
        type: 0, // 审查机构类型
        opinion: "",
        signature: "",
        status: 0,
        createTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
      },
      surveyBaseData: {
        drawingNumber: "",
        companyId: "",
        totalAreaInRedline: "",
        totalAreaForced: "",
        totalAreaDevelop: "",
        totalAreaOrganized: "",
        totalAreaReclaim: ""
      },
      form: {
        drawingAudit: "",
        dataReportAudit: "",
        otherGrassAudit: "",
        questionAudit: ""
      },
      beforeOpinions: [],
      processData: "", // 流程信息
      processData1: {
        groupId: 5,
        projectId: localStorage.getItem("projectId") * 1
      },
      userInfo: JSON.parse(localStorage.getItem("SET_LOGIN_INFO")), // 获取用户信息
      opinionFormRule: {
        opinion: [
          {
            require: true,
            validator: (rule, value, callback) => {
              if (value.length < 1 || value.length > 200) {
                callback(new Error("请输入意见"));
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        createTime: [
          {
            require: true,
            validator: (rule, value, callback) => {
              if (value.length < 1 || value.length > 200) {
                callback(new Error("请选择时间"));
              }
              callback();
            },
            trigger: "blur"
          }
        ]
      },
      formRule: {
        drawingAudit: [
          {
            require: true,
            validator: (rule, value, callback) =>
              this._validate(rule, value, callback, "请填写图件审查内容"),
            trigger: "blur"
          }
        ],
        dataReportAudit: [
          {
            require: true,
            validator: (rule, value, callback) =>
              this._validate(rule, value, callback, "请填写数据及报告审查内容"),
            trigger: "blur"
          }
        ],
        otherGrassAudit: [
          {
            require: true,
            validator: (rule, value, callback) =>
              this._validate(rule, value, callback, "请填写其他草地审查内容"),
            trigger: "blur"
          }
        ],
        questionAudit: [
          {
            require: true,
            validator: (rule, value, callback) =>
              this._validate(rule, value, callback, "请填写疑问审查内容"),
            trigger: "blur"
          }
        ]
      },
      signPhotoObj: {
        img: ""
      }
    };
  },

  created() {
    this._initData();
  },

  computed: {
    isCurrentProcess: function() {
      let isTrue = localStorage.getItem("key") == "PRE_PROJECTING_DIST_0";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },

  methods: {
    onSubmit() {
      let isTrue = false;
      let fdIsTrue = false;
      this.$refs["opinionForm"].validate(valid => {
        isTrue = Boolean(valid);
      });
      this.$refs["formData"].validate(valid => {
        fdIsTrue = Boolean(valid);
      });
      if (isTrue && fdIsTrue) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        const examineOpinion = Object.assign(this.examineOpinion, {
          projectId: this.projectId,
          signature: this.userInfo.signedPhoto
        });
        const data = Object.assign(this.form, {
          examineOpinion: examineOpinion,
          surveyBaseData: this.surveyBaseData,
          projectId: this.projectId
        });
        saveDataAdvice(data)
          .then(res => {
            loading.close();
            this.$message.success("操作成功");
            this.$router.push("/projectManagement/planningStage/dealwith");
          })
          .catch(err => {
            loading.close();
          });
      }
    },
    _validate(rule, value, callback, msg) {
      if (value == "") {
        callback(new Error(msg));
      }
      callback();
    },
    // 获取历史数据
    _getHistoryData() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      // 公司列表
      let params = {
        page: 1,
        size: 9999
      };
      getDataAdvice(this.projectId).then(res => {
        this.form = res.data;
      });
      getSurveyData(this.projectId)
        .then(res => {
          this.surveyBaseData = res.data;
          loading.close();
        })
        .catch(err => {
          loading.close();
        });
    },
    // 审查流程/审查意见数据获取
    _getProcessList() {
      this.processData = ["区县中心初审意见", "区县局初审意见"];
      const opinionType = this.examineOpinion.type;
      examineOpinionList({
        groupId: this.examineOpinion.groupId,
        projectId: this.projectId
      }).then(res => {
        if (res.data.length > 0) {
          // 审核意见
          const inx = res.data.findIndex(item => {
            return item.type == opinionType;
          });
          if (inx !== -1) {
            this.examineOpinion = res.data[inx];
            this.signPhotoObj["img"] =
              config.baseUrlImg + res.data[inx].signature;
          }
        } else {
          this.signPhotoObj["img"] =
            config.baseUrlImg + this.userInfo.signedPhoto;
        }
        // 流程数据获取
        let processList = this.processData.slice();
        for (let i = 0; i < processList.length; i++) {
          let temp = {
            // 审查流程初始化
            isReview: false,
            institutions: processList[i],
            status: 0
          };
          if (res.data[i]) {
            // 判断是否存在已走流程
            const item = res.data[i];
            temp["isReview"] = true;
            temp["groupId"] = item.groupId;
            temp["type"] = item.type;
            temp["status"] = item.status;
            temp["people"] = `${config.baseUrlImg}${item.signature}`;
            temp["date"] = item.createTime;
            temp["advice"] = item.opinion;
          }
          processList[i] = temp;
        }
        this.processData = processList;
        this.beforeOpinions = processList.slice(0, opinionType);
      });
    },
    _initData() {
      this._getHistoryData();
      this._getProcessList();
    }
  }
};
</script>
<style lang="scss" scoped>
.csaro {
  .resultIdea {
    /deep/ .el-tabs__content {
      overflow: unset;
    }

    /deep/ .el-tabs__header {
      background: #fff;
      height: 46px;
      padding: 0 20px;

      /deep/ .el-tabs__item {
        height: 36px;
        line-height: 36px;
        margin-top: 10px;
        padding: 0 10px;
      }

      /deep/ .el-tabs__nav-wrap::after {
        width: 0;
      }
    }

    .earlyMappingForm {
      /deep/ .el-form-item__label {
        color: #8c8c8c;
        text-align: right;
      }
      /deep/ .el-input__suffix {
        i {
          font-style: normal;
        }
      }
      input {
        width: 180px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
      }
    }

    .formAllRow {
      /deep/
        .el-form-item__content
        /deep/
        .el-textarea
        /deep/
        .el-textarea__inner {
        width: 1170px;
        max-width: calc(100vw - 320px - 60px);
      }

      /deep/ .el-form-item__label {
        display: block;
        text-align: left;
        margin-top: 15px;
      }

      /deep/ .el-form-item {
        width: 100%;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.processContainer {
  background: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  height: calc(100vh - 120px);
}
.maincontent {
  height: calc(100vh - 114px);
  padding: 30px;
  overflow: auto;
  background: #f5f6f7;
  .earlyMappingForm {
    background: #fff;
    padding: 20px;
  }
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
    margin-top: 60px;
    margin-bottom: 30px;
    &:first-child {
      margin-top: 0;
    }
  }
  .basicInfo {
    span {
      display: inline-block;
      margin: 20px 60px 0 0;
      font-size: 14px;
      color: #8c8c8c;
    }
  }
  .formcontent {
    margin-top: 30px;
  }
  .secondtitle {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    margin-right: 20px;
    line-height: 38px;
  }
}
</style>

